<template>
  <h3>仓库设置</h3>
  <!-- 搜索栏 -->
  <el-row style="margin-top: 10px">
    <el-col :span="24">
      <el-form :model="houseQuery" inline>
        <el-form-item label="仓库编码">
          <el-input v-model="houseQuery.houseEncode" placeholder="请输入仓库编码"/>
        </el-form-item>
        <el-form-item label="仓库名称">
          <el-input v-model="houseQuery.houseName" placeholder="请输入仓库名称"/>
        </el-form-item>
        <el-form-item>
          <el-button @click="loadHouses" type="primary">搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <!-- 工具栏 -->
  <el-row>
    <el-col :span="24">
      <el-button type="primary" @click="toAdd">新增</el-button>
      <el-button type="primary" @click="toEdit">修改</el-button>
      <el-button type="primary" @click="toDelete">删除</el-button>
    </el-col>
  </el-row>
  <!-- 数据表 -->
  <el-row style="margin-top: 10px">
    <el-col :span="24">
      <el-table
          :data="houses"
          border
          stripe
      ><!-- stripe可以为表格添加斑马纹样式，默认false --><!--border表示给表格加上边框 -->
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="houseEncode" label="仓库编码" width="150" align="center">
          <template #default="scope">
            <el-link @click="showDetail(scope.row.houseId)" type="primary">{{ scope.row.houseEncode }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="houseName" label="仓库名称" width="150" align="center"/>
        <el-table-column prop="houseLocation" label="仓库位置" width="150" align="center"/>
        <el-table-column prop="houseArea" label="仓库面积" width="200" align="center"/>
        <el-table-column prop="houseHead" label="负责人" width="200" align="center"/>
        <el-table-column prop="houseRemark" label="备注" width="200" align="center"/>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button-group>
              <el-button size="small" type="primary" @click="reservoir(scope.row.houseId)">库区</el-button>
              <el-button size="small" type="primary" @click="editHouse(scope.row.houseId)">修改</el-button>
              <el-button size="small" type="danger" @click="deleteHouse(scope.row)">删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <!-- 新增仓库设置弹窗 -->
  <setting-add :flag="addHouse" @cancelAdd="cancelAdd" @addComplete="loadHouses"/>
  <!-- 编辑仓库设置弹窗 -->
  <setting-edit :house-id="editHouseId" @cancelEdit="cancelEdit" @editComplete="loadHouses"/>
  <!-- 详情仓库设置弹窗 -->
  <setting-detail :house-id="detailHouseId" @cancelDetail="cancelDetail"/>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import houseRequest from "@/api/house.js";
import SettingAdd from "@/views/store/setting-add.vue";
import SettingDetail from "@/views/store/setting-detail.vue";
import SettingEdit from "@/views/store/setting-edit.vue";
import router from "@/router/index.js";

// 封装查询条件
let houseQuery = ref({});
// 封装查询的结果集合
let houses = ref([]);
// 新增的addHouse
let addHouse = ref(-1);
// 编辑的editHouseId
let editHouseId = ref(-1);
// 详情的detailHouseId
let detailHouseId = ref(-1);

function showDetail(houseId) {
  detailHouseId.value = houseId;
}
function cancelDetail(){
  detailHouseId.value = -1;
}
function toAdd(){
  addHouse.value = 1;
}
function cancelAdd(){
  addHouse.value = -1;
}
function editHouse(houseId){
  editHouseId.value = houseId;
}
function cancelEdit() {
  editHouseId.value = -1;
}
function loadHouses(){
  houseRequest.loadHouses(houseQuery.value,res=>{
    houses.value = res.data;
  })
}

function reset(){
  houseQuery.value.houseEncode = null;
  houseQuery.value.houseName = null;
  houseRequest.loadHouses(houseQuery.value,res=>{
    houses.value = res.data;
  })
}
function deleteHouse(house){
  ElMessageBox.confirm(
      '您确定要将设备[' +house.houseEncode + ']删除吗？',
      'Warning',
      {
        confirmButtonText: '是的',
        cancelButtonText: '点错了',
        type: 'warning',
      }
  ).then(() => {
    houseRequest.delete(house.houseId, res => {
      ElMessage({
        type: "success",
        message: "操作完成"
      });
      loadHouses();
    })
  }).catch(() => {
  });
}

function reservoir(houseId){
  router.push({name:"reservoir",params:{id:houseId}})
}

onMounted(()=>{
  loadHouses();
})
</script>

<style scoped>

</style>